<div class="card">
  <div class="card-header">
    <button
      type="button"
      class="btn btn-primary btn-sm"
      data-toggle="modal"
      data-target="#modal-default"
    >
      添加广告
    </button>
  </div>
  <!-- /.card-header -->
  <div class="card-body">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th style="width: 10px">id</th>
          <th>广告标题</th>
          <th>广告图片</th>
          <th>广告类别</th>
          <th>广告链接</th>
          <th>添加时间</th>
          <th>修改时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>626a5b2d1c5387a6c876</td>
          <td>轮播图广告二</td>
          <td>
            <img width="60" src="/adminLTE/imgs/adv1.jpg" alt="" />
          </td>
          <td>轮播图底部广告</td>
          <td>www.atguigu.com</td>
          <td>2022-4-28 18:29:35</td>
          <td>2022-4-28 18:29:35</td>
          <td>
            <button type="button" class="btn btn-danger btn-xs">删除</button>
            <button type="button" class="btn btn-primary btn-xs">修改</button>
          </td>
        </tr>
        <tr>
          <td>626a5b2d1c5387a6c876</td>
          <td>轮播图广告二</td>
          <td>
            <img width="60" src="/adminLTE/imgs/adv1.jpg" alt="" />
          </td>
          <td>轮播图底部广告</td>
          <td>www.atguigu.com</td>
          <td>2022-4-28 18:29:35</td>
          <td>2022-4-28 18:29:35</td>
          <td>
            <button type="button" class="btn btn-danger btn-xs">删除</button>
            <button type="button" class="btn btn-primary btn-xs">修改</button>
          </td>
        </tr>
        <tr>
          <td>626a5b2d1c5387a6c876</td>
          <td>轮播图广告二</td>
          <td>
            <img width="60" src="/adminLTE/imgs/adv1.jpg" alt="" />
          </td>
          <td>轮播图底部广告</td>
          <td>www.atguigu.com</td>
          <td>2022-4-28 18:29:35</td>
          <td>2022-4-28 18:29:35</td>
          <td>
            <button type="button" class="btn btn-danger btn-xs">删除</button>
            <button type="button" class="btn btn-primary btn-xs">修改</button>
          </td>
        </tr>
        <tr>
          <td>626a5b2d1c5387a6c876</td>
          <td>轮播图广告二</td>
          <td>
            <img width="60" src="/adminLTE/imgs/adv1.jpg" alt="" />
          </td>
          <td>轮播图底部广告</td>
          <td>www.atguigu.com</td>
          <td>2022-4-28 18:29:35</td>
          <td>2022-4-28 18:29:35</td>
          <td>
            <button type="button" class="btn btn-danger btn-xs">删除</button>
            <button type="button" class="btn btn-primary btn-xs">修改</button>
          </td>
        </tr>
        <tr>
          <td>626a5b2d1c5387a6c876</td>
          <td>轮播图广告二</td>
          <td>
            <img width="60" src="/adminLTE/imgs/adv1.jpg" alt="" />
          </td>
          <td>轮播图底部广告</td>
          <td>www.atguigu.com</td>
          <td>2022-4-28 18:29:35</td>
          <td>2022-4-28 18:29:35</td>
          <td>
            <button type="button" class="btn btn-danger btn-xs">删除</button>
            <button type="button" class="btn btn-primary btn-xs">修改</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div
  class="modal fade show"
  id="modal-default"
  style="padding-right: 17px; display: display"
  aria-modal="true"
  role="dialog"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">添加广告</h4>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true" id="cancel-x">×</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 添加广告表单 -->
        <form class="form-horizontal">
          <div class="card-body">
            <div class="form-group row">
              <label for="inputEmail3" class="col-sm-2 col-form-label"
                >标题</label
              >
              <div class="col-sm-10">
                <input
                  type="text"
                  class="form-control"
                  id="inputEmail3"
                  placeholder="请输入广告标题"
                />
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword3" class="col-sm-2 col-form-label"
                >类别</label
              >
              <div class="col-sm-10">
                <input
                  type="text"
                  class="form-control"
                  id="inputPassword3"
                  placeholder="请输入广告类别"
                />
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword3" class="col-sm-2 col-form-label"
                >链接</label
              >
              <div class="col-sm-10">
                <input
                  type="text"
                  class="form-control"
                  id="inputPassword3"
                  placeholder="请输入广告链接"
                />
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword3" class="col-sm-2 col-form-label"
                >图片</label
              >
              <div class="col-sm-10">
                <input
                  type="file"
                  class="form-control upload-file"
                  id="inputPassword3"
                />
              </div>
            </div>
            <div class="form-group row">
              <img src="/adminLTE/imgs/adv1.jpg" alt="" width="100" />
            </div>
          </div>
          <!-- /.card-body -->
        </form>
      </div>
      <div class="modal-footer justify-content-between">
        <button
          id="cancel"
          type="button"
          class="btn btn-default"
          data-dismiss="modal"
        >
          取消
        </button>
        <button
          id="saveAdmin"
          type="button"
          class="btn btn-primary"
          data-dismiss="modal"
        >
          保存
        </button>
      </div>
    </div>
  </div>
</div>
